<template>
  <div class="sm:self-start flex flex-row flex-1 gap-16 w-full sm:w-auto">
    <div class="flex-1 hidden lg:block" v-for="footerItem in footerNavData" :key="footerItem.title">
      <h3 class="mb-3 text-xl font-bold">{{footerItem.title}}</h3>
      <ul class="text-sm leading-relaxed" v-if="footerItem.child?.length">
        <li v-for="item in footerItem.child" :key="item.title"><a :href="item.path">{{item.title}}</a></li>
      </ul>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useFooterNav } from './useFooterNav';
export default defineComponent({
  name: 'FooterNav',
  setup() {
    const footerNavData = useFooterNav();

    return { footerNavData }
  }

})
</script> 
